<template>
  <div class="player">
    <div class="SongInformation" v-if="JSON.stringify(player_list) !== '[]'">
      <dl>
        <dt>
          <!-- 放音乐图片 -->

          <router-link
            v-if="player_list[nowindex]"
            :to="{
              name: 'songList',
              params: { id: player_list[nowindex].id, name: 'music' },
            }"
          >
            <img
              v-if="player_list[nowindex]"
              :src="player_list[nowindex].al.picUrl"
              alt=""
          /></router-link>
        </dt>
        <dd class="text-base">
          <p class="" v-if="player_list[nowindex]">
            {{ player_list[nowindex].name
            }}<i class="iconfont ml-2 text-xs">&#xe600;</i>
          </p>
          <p class="text-xs mt-1" v-if="player_list[nowindex]">
            {{ player_list[nowindex].ar[0].name }}
          </p>
        </dd>
      </dl>
    </div>
    <div v-else class="SongInformation"></div>
    <div class="playerContro">
      <div class="playerContro_top text-sm">
        <i class="iconfont">&#xe61f;</i>
        <i class="iconfont" @click="skipFn('next')">&#xe63c;</i>
        <i class="iconfont pause" v-if="pause_play" @click="stop_playing"
          >&#xe632;</i
        >
        <i class="iconfont pause" v-else @click="stop_playing"> &#xe60b; </i>

        <i class="iconfont" @click="skipFn('pre')">&#xe63e;</i>
        <i class="iconfont">&#xe602;</i>
      </div>
      <div class="playerContro_bottom flex items-center text-xs">
        <p>{{ currentTime }}</p>
        <el-progress
          ref="thumb"
          :percentage="percentage"
          :show-text="text_pro"
          color="#FF4E4E"
          class="mx-2"
        ></el-progress>
        <p>{{ totalTime }}</p>
      </div>
    </div>
    <div class="playerMenu flex items-center w-64 justify-around">
      <span class="standard">标准</span>
      <i class="iconfont">&#xe6a6;</i>
      <i class="iconfont">&#xe626;</i>
      <el-progress
        :percentage="volume"
        ref="volume"
        :show-text="text_pro"
        color="#FF4E4E"
        class="mx-1 w-24"
      ></el-progress>
      <i class="iconfont" @click="songlist = !songlist">&#xe615;</i>
    </div>
    <audio
      ref="audio"
      autoplay
      v-show="player_list[nowindex]"
      :src="
        JSON.stringify(player_list) === '[]' ? '' : player_list[nowindex].url
      "
      controls
    ></audio>
    <div class="songlist fixed" :class="{ songlist_hidden: songlist }">
      <div class="playlist">
        <span class="playlist_play">播放列表</span>
        <span>历史记录</span>
      </div>
      <div
        class="songlist_data flex justify-between text-xs mt-5 text-gray-400"
      >
        <span>共{{ player_list.length ? player_list.length : 0 }}首歌</span>
        <div>
          <i class="el-icon-folder-add"></i>
          <span>收藏全部</span>
          |
          <i class="el-icon-delete"></i>
          <span @click="clear" class="cursor-pointer">清空</span>
        </div>
      </div>
      <el-divider></el-divider>

      <div v-if="JSON.stringify(player_list) === '[]'" class="text-xs pt-20">
        <p>你还没添加任何歌曲</p>
        <span
          >去首页
          <router-link to="/" class="underline text-blue-700"
            >发现音乐</router-link
          ></span
        >
      </div>
      <div v-else class="w-full">
        <table class="song w-full text-gray-400 text-sm">
          <tbody>
            <tr
              v-for="(item, index) in player_list"
              :key="index"
              class="flex justify-between my-1"
              @dblclick="addmusic(item)"
            >
              <td class="truncate">{{ item.name }}</td>
              <td class="truncate">{{ item.ar[0].name }}</td>
              <td class="truncate">
                <i class="el-icon-paperclip mr-2"></i>{{ item.dt | timeTrans }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
/* 
JSON.stringify(this.$store.state.changenowSong) !== undefined
          ? this.$store.state.changenowSong.url
          : 'http://m701.music.126.net/20210322121310/245862307b683be238d35f2ee09cf0f1/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/7648717528/b3f0/3554/892e/e8e8b07882318e6843bedf18ef64173f.mp3' */
export default {
  name: "player",
  data() {
    return {
      player_data: {},
      player_list: this.$store.state.musicList,
      pause_play: false,
      text_pro: false,
      nowindex: this.$store.state.nowindex,
      nowsong_data: this.$store.state.nowsong,
      percentage: 0,
      currentTime: "00:00", // 当前播放时间
      totalTime: "00:00", // 总播放时间
      songlist: true,
      volume: 10,
      mu: false,
    };
  },
  watch: {
    player_list() {
      this.pause_play = true;
      this.nowindex = 0;
      this.player_list = this.$store.state.musicList;
    },
    // "this.$refs.audio.currentTime": function () {
    //   alert("13");
    //   this.$store.commit("changecurrentTime", this.$refs.audio.currentTime);
    // },
  },
  mounted() {
    this.cprogress();
    this.audioInit();
    this.cvolume();
  },
  methods: {
    addmusic(obj) {
      this.$store.commit("addMusic", obj);
    },
    stop_playing() {
      if (!this.$refs.audio.paused) {
        this.$refs.audio.pause();
        this.pause_play = false;
      } else {
        this.$refs.audio.play();
        this.pause_play = true;
      }
    },
    skipFn(type) {
      if (type === "next") {
        this.nowindex - 1 >= 0 ? this.nowindex-- : 0;
        this.$store.commit("changenowsong", this.player_list[this.nowindex]);
      } else if (type === "pre") {
        this.nowindex < this.player_list.length - 1
          ? this.nowindex++
          : this.player_list.length - 1;
        this.$store.commit("changenowsong", this.player_list[this.nowindex]);
      }
      // this.$refs.audio.src = this.$store.state.musicList[this.nowindex].url;
    },
    cprogress() {
      let _this = this.$refs.thumb.$el;
      _this.addEventListener("mousedown", () => {
        this.$refs.audio.pause();
        this.pause_play = false;
        _this.addEventListener("mousemove", this.move);

        _this.addEventListener("mouseup", () => {
          _this.removeEventListener("mousemove", this.move);
          this.pause_play = true;
          this.$refs.audio.currentTime =
            (this.$refs.audio.duration * this.percentage) / 100;

          this.$refs.audio.play();
        });
      });
    },
    cvolume() {
      let _this = this.$refs.volume.$el;
      _this.addEventListener("mousedown", () => {
        _this.addEventListener("mousemove", this.vmove);

        _this.addEventListener("mouseup", () => {
          _this.removeEventListener("mousemove", this.vmove);
          this.$refs.audio.volume = this.volume / 100;

          this.$refs.audio.play();
        });
      });
    },
    audioInit() {
      let audio = this.$refs.audio;
      audio.addEventListener("timeupdate", () => {
        this.$store.commit("changecurrentTime", parseInt(audio.currentTime));
        // 当前播放时间
        this.currentTime = this.timeToString(audio.currentTime);

        audio.volume = this.volume / 100;
        // 总播放时间
        this.totalTime = this.timeToString(audio.duration);

        // 当前播放进度百分比
        let precent = audio.currentTime / audio.duration || 0;

        // 当前播放进度
        this.progressScaleX = precent.toFixed(3);

        // 当前进度按钮位置
        this.percentage = precent * 100;
      });
      audio.addEventListener("ended", () => {
        this.nowindex < this.player_list.length ? this.nowindex++ : 0;
      });
    },
    timeToString(param) {
      param = parseInt(param);
      let mm = "",
        ss = "";
      if (param >= 0 && param < 60) {
        param < 10 ? (ss = "0" + param) : (ss = param);
        return "00:" + ss;
      } else if (param >= 60 && param < 3600) {
        mm = parseInt(param / 60);
        mm < 10 ? (mm = "0" + mm) : mm;
        param - parseInt(mm * 60) < 10
          ? (ss = "0" + String(param - parseInt(mm * 60)))
          : (ss = param - parseInt(mm * 60));
        return mm + ":" + ss;
      }
    },
    move(event) {
      let _this = this.$refs.thumb.$el;
      this.percentage = parseInt((event.offsetX / _this.offsetWidth) * 100);
      // this.volume
    },
    vmove(event) {
      let _this = this.$refs.volume.$el;
      this.volume = parseInt((event.offsetX / _this.offsetWidth) * 100);
    },
    clear() {
      console.log(1);
      this.$store.commit("addclear");
    },
  },
  filters: {
    timeTrans(val) {
      var date = new Date(val);
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return `${m}${s}`;
    },
  },
};
</script>

<style lang="scss" scoped>
audio {
  position: fixed;
  top: 200px;
  height: 200px;
  display: none;
}
.player {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .SongInformation {
    width: 210px;
    dl {
      display: flex;
    }
    dt {
      width: 50px;
      height: 50px;
      background: #66ccff;
      margin-right: 10px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }
    dd {
      width: 150px;
      text-align: left;
      p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  .playerContro {
    display: flex;
    flex-direction: column;
    width: 20%;
    justify-content: space-between;

    .playerContro_top {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 5px 0;
      i {
        cursor: pointer;
      }
    }
    .pause {
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #ebebed;
      text-align: center;
      line-height: 30px;
    }
  }
  .playerContro_bottom {
    // height: 20px;
    .el-progress {
      width: 100%;
      cursor: pointer;
    }
  }
  .playerMenu {
    i {
      font-size: 20px;
      cursor: pointer;
    }
    .standard {
      cursor: pointer;
      font-size: 12px;
      display: block;
      border: 1px solid #000;
      width: 30px;
      height: 16px;
      line-height: 16px;
      border-radius: 3px;
      .el-progress {
        cursor: pointer;
      }
    }
  }
  .songlist {
    padding: 10px;
    bottom: 60px;
    right: 0px;
    width: 420px;
    height: calc(100% - 120px);
    z-index: 9999;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: -5px 0px 5px -5px #ccc;
    transition: 0.5s;
    transform: scaleY(1);
    transform-origin: 50% 100%;
    tr {
      width: 400px;
    }

    .playlist {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      border: solid 1px #bbbbbb;
      width: 220px;
      border-radius: 50px;
      margin: 0 auto;
      height: 36px;
      margin-top: 10px;
      span {
        width: 100%;
        cursor: pointer;
      }

      .playlist_play {
        // border: 1px solid #999;
        border-radius: 36px;
        text-align: center;
        line-height: 36px;
        background: #bbbbbb;
        color: white;
      }
    }
  }
  .songlist_hidden {
    transform: scaleY(0);
  }
  .song {
    td {
      text-align: left;
      width: 30%;
    }
    tr:nth-child(even) {
      background: #f9f9f9;
    }
  }
}
</style>